import React from 'react'

const Email = () => {
    // 初始化表单对象
    const [form] = React.$Vant.Form.useForm()
    const navigate = React.$Router.useNavigate()
    // 定义状态
    const [LoginAuth, setLoginAuth] = React.useState(React.$LoginAuth)
    const [show, setShow] = React.useState(false)

    // 提交验证
    const onEmail = async (values) => {
        let data = {
            busid: LoginAuth.id,
            email: values.email,
            code: values.code
        }

        let result = await React.$Api.email(data);

        if(result.code===1){
            React.$Vant.Toast({
                type:'success',
                message: result.msg,
                onClose:()=>{
                    React.$Cookies.save('LoginAuth',result.data,{path:'/'})
                    navigate(-1)
                }
            })
        }else{
            React.$Vant.Toast.fail(result.msg)
        }
    }

    // 倒计时结束后的操作
    const onCountDown = () => {
        setShow(false)
    }

    const onSend = async () => {
        setShow(true)

        // 组装数据
        let data = {
            id: LoginAuth.id,
            email: LoginAuth.email
        }

        let result = await React.$Api.send(data)

        if (result.code === 1) {
            React.$Vant.Toast({
                type: 'success',
                message: result.msg,
            })
        } else {
            React.$Vant.Toast.fail(result.msg)
        }
    }


    const onBack = () => {
        navigate(-1)
    }

    const Item = () => {
        if (show === true) {
            return (
                <>
                    <React.$Vant.CountDown time={60 * 1000} onFinish={onCountDown} format='ss' />s
                </>
            )
        } else {
            return (
                <React.$Vant.Button size="small" type="primary" onClick={onSend}>发送</React.$Vant.Button>
            )
        }
    }

    // 提交按钮
    const FormFooter = () => {
        return (
            <div style={{ margin: '16px 16px 0' }}>
                <React.$Vant.Button round='true' nativeType="submit" type='primary' block='true'>
                    提交
                </React.$Vant.Button>
            </div>
        )
    }

    return (
        <>
            <div className="my_kuang">
                {/* 导航 */}
                <React.$Vant.NavBar
                    title="邮箱认证"
                    leftText="返回"
                    onClickLeft={onBack}
                />

                {/* 显示头像 */}
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <img id="Dfgrg" style={{ height: '1.1rem' }} src={LoginAuth.avatar_cdn} alt="" />
                        </div>
                    </div>
                </div>

                <React.$Vant.Form
                    border
                    colon
                    labelAlign='right'
                    onFinish={onEmail}
                    footer={
                        <FormFooter></FormFooter>
                    }
                >

                    <React.$Vant.Form.Item
                        name='email'
                        label='邮箱'
                        disabled
                        labelWidth='55'
                        rules={[{ required: true, message: '邮箱必填' }]}
                        initialValue={LoginAuth.email || ''}
                    >
                        <React.$Vant.Input />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Form.Item
                        name='code'
                        label='验证码 '
                        rules={[{ required: true, message: '验证码必填' }]}
                        labelWidth='55'
                    >
                        <React.$Vant.Input
                            placeholder='请输入验证码'
                            suffix={
                                <Item />
                            }
                        />
                    </React.$Vant.Form.Item>
                </React.$Vant.Form>


            </div>
        </>
    )
}

export default Email